<template>
  <div class="lg:flex">
    <Avatar :size="72" :src="userInfo.avatar || headerImg" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">{{ hourTip }}, 欢迎 {{ userInfo.name }} 登录！</h1>
      <span class="text-secondary">
        角色: {{ userInfo.roleName }}
        <span class="ml-2"> 部门: {{ userInfo?.departmentName }} </span>
        <span class="ml-2"> {{ userInfo?.serviceInfo }} </span>
      </span>
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <div class="flex flex-col justify-center text-right"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import headerImg from '@/assets/images/header.jpg';

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  const hourTip = computed(() => {
    let date = new Date();
    let tip = '晚上好';
    if (date.getHours() < 12) {
      tip = '上午好';
    } else if (date.getHours() >= 12 && date.getHours() < 18) {
      tip = '下午好';
    }
    return tip;
  });
</script>
